<template>
    <div class="bread">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(v,i) in breadList" :key="i" :to="{ path: v.meta.path }">{{ v.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    data () {
        return {
            breadList:[]
        }
    },
    watch:{
        $route(){
            this.getBreadcrumb();
        }
    },
    methods:{
        isHome(route) {
            return route.name === "home";
        },
        getBreadcrumb() {
        let matched = this.$route.matched;
        //如果不是首页
        if (!this.isHome(matched[0])) {
            matched = [].concat(matched);
        }
        this.breadList = matched;
        }
    },
    created(){
        this.getBreadcrumb()
    }
}
</script>

<style lang="scss">
    .bread{
         width: 300px;
  height: 100%;
    }
</style>